<template>
    <div class="body qiuzhifankui">
        <div class="inv-top-menu-bar">
            <div class="top-menu">
                <div class="top-menu-list font13">
                    <a
                        class="t-btn"
                        @click="changeNav(0)"
                        :class="{ active: type === 0 }"
                        >面试邀请</a
                    >
                    <a
                        class="t-btn"
                        @click="changeNav(1)"
                        :class="{ active: type === 1 }"
                        >已申请职位</a
                    >
                </div>
            </div>
        </div>
        <!-- 列表 -->
        <div class="n_lb">
            <div
                class="n_line"
                v-for="(item, index) in pageListInfo.comment_list"
                :key="index"
            >
                <div class="n_t1 substring font15" data-yid="2">
                    {{ item.company_name }}
                    <div class="nt_right txt_gray font13">企业未查看</div>
                </div>
                <div class="n_t2 substring font12">
                    {{ item.jobs_name }}
                    <div class="nt_right txt_gray" v-if="type == 0">
                        {{ item.interview_time }}
                    </div>
                    <div class="nt_right txt_gray" v-if="type == 1">
                        {{ item.apply_addtime | timer }}
                    </div>
                </div>
            </div>
            <!-- <div class="n_line">
                <div
                    class="n_t1 substring font15"
                    data-yid="3"
                    onclick="window.location='/index.php?m=Mobile&amp;c=Jobs&amp;a=show&amp;id=3'"
                >
                    测试-justin
                    <div class="nt_right font13 txt_green">合适</div>
                </div>
                <div class="n_t2 substring font12">
                    测试
                    <div class="nt_right txt_gray">2021-07-18</div>
                </div>
            </div> -->
        </div>
        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>

        <component
            :is="'ContentNone'"
            v-show="pageListInfo.comment_list.length == 0 && pageInfo.pageSatus"
        ></component>
    </div>
</template>

<script>
import { axiosGet } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            type: 0,
            pageNone: false,

            pageListInfo: {
                comment_list: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.type = Number(this.$route.query.type);

        this.pageListInfo.comment_list = [];
        this.pageInfo.pageSatus = false;
        if (this.type == 0) {
            this.getList();
        } else {
            this.getzhiwei();
        }
    },
    methods: {
        // 切换分类
        changeNav(type) {
            this.type = type;
            this.pageListInfo.comment_list = [];
            this.pageInfo.pageSatus = false;
            if (this.type == 0) {
                this.getList();
            } else {
                this.getzhiwei();
            }
        },
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            if (this.type == 0) {
                this.getList(data);
            } else {
                this.getzhiwei(data);
            }
        },
        // 获取评价订单列表
        getList(page = 1, page_size = 10) {
            axiosGet(
                '/apis/jobs/interview',
                {
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.interview.page_params.nowPage ==
                        res.data.interview.page_params.totalPages
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    for (let i in res.data.interview.list) {
                        let element = res.data.interview.list[i];
                        this.pageListInfo.comment_list.push(element);
                    }

                    this.pageListInfo.page = res.data.interview.page_params;
                }
            );
        },
        // 获取申请职位
        getzhiwei(page = 1, page_size = 10) {
            axiosGet(
                '/apis/personal/jobs_apply',
                {
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.apply_list.page_params.nowPage ==
                        res.data.apply_list.page_params.totalPages
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    for (let i in res.data.apply_list.list) {
                        let element = res.data.apply_list.list[i];
                        this.pageListInfo.comment_list.push(element);
                    }

                    this.pageListInfo.page = res.data.apply_list.page_params;
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="less" scope>
.qiuzhifankui {
    .inv-top-menu-bar {
        background: #fff;
        box-sizing: border-box;
    }
    .inv-top-menu-bar .top-menu {
        overflow: hidden;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .inv-top-menu-bar .top-menu::-webkit-scrollbar {
        display: none;
    }
    .inv-top-menu-bar .top-menu-list {
        white-space: nowrap;
    }
    .inv-top-menu-bar .top-menu-list .t-btn {
        width: 50%;
        white-space: nowrap;
        display: inline-block;
        text-align: center;
        color: #666;
        text-decoration: none;
        padding: 0.5333rem 0.4267rem;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
    }
    .inv-top-menu-bar .top-menu-list .t-btn.active {
        color: #0180cf;
    }

    .n_lb .n_line {
        width: 100%;
        background: #ffffff;
        margin-top: 0.2133rem;
        padding: 0.4267rem 0.7467rem;
    }
    .n_lb .n_line .n_t1 {
        position: relative;
        padding: 0.32rem 2.1333rem 0.32rem 0;
    }
    .n_lb .n_line .n_t1 .nt_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .n_lb .n_line .n_t2 {
        position: relative;
        padding: 0.32rem 2.1333rem 0.32rem 0;
        color: #666666;
    }
    .n_lb .n_line .n_t2 .nt_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .n_lb .n_line .txt_yellow {
        color: #ffaf24;
    }
    .n_lb .n_line .txt_green {
        color: #24b562;
    }
    .n_lb .n_line .txt_gray {
        color: #999999;
    }
    .n_lb .n_line .txt_red {
        color: #ff0000;
    }
}
</style>
